// 引入qrcode.js库
import QRCode from 'qrcode'
export default (link,text) => {
  // 获取DOM元素
  const qrCodeContainer = document.createElement('canvas')
  // 生成二维码
  QRCode.toCanvas(qrCodeContainer, link, {
    width: 200
  }, function(error) {
    if (error) console.error(error)
    else {
      // 在二维码上添加logo
      const logo = document.getElementById('logo')
      const logoImage = new Image()
      logoImage.src = logo.src
      logoImage.onload = function() {
        const w = 50
        const h = w / logo.width * logo.height
        const canvas = qrCodeContainer
        const ctx = canvas.getContext('2d')
        ctx.drawImage(logoImage, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h)
        const base64 = canvas.toDataURL('image/jpeg', 1)
        var canvas2 = document.createElement('canvas')
        canvas2.width = 250
        canvas2.height = 250
        const ctx2 = canvas2.getContext('2d')
        ctx2.fillStyle = '#ffffff'
        ctx2.fillRect(0, 0, 250, 250)
        const img = new Image()
        img.src = base64
        img.onload = function() {
          ctx2.drawImage(img, 25, 0, 200, 200)
          ctx2.font = '25px Arial bold'
          ctx2.fillStyle = '#4D88F7'
          ctx2.fillText(text, 4, 220)
          const base642 = canvas2.toDataURL('image/jpeg', 1)
          const resultQrcode = document.getElementById('resultQrcode')
          resultQrcode.src = base642
        }
      }
    }
  })
}

function getFontWidth(fonSize, fontFace, ctx, text) {
  ctx.font = fonSize + 'px ' + fontFace
  let txtWidth = 0
  for (let i = 0; i < text.length; i++) {
    txtWidth += ctx.measureText(text[i]).width
  }
  return txtWidth
}

export const createh5Link = (link,text,logoUrl,cb) => {
  // 获取DOM元素
  const qrCodeContainer = document.createElement('canvas')
  // 生成二维码
  QRCode.toCanvas(qrCodeContainer, link, {
    width: 200
  }, function(error) {
    if (error) console.error(error)
    else {
      // 在二维码上添加logo
      const logoImage = new Image()
      logoImage.src = logoUrl
      logoImage.onload = function() {
        const w = 50
        const h = w / this.width * this.height
        const canvas = qrCodeContainer
        const ctx = canvas.getContext('2d')
        ctx.drawImage(logoImage, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h)
        const base64 = canvas.toDataURL('image/jpeg', 1)
        var canvas2 = document.createElement('canvas')
        canvas2.width = 250
        canvas2.height = 250
        const ctx2 = canvas2.getContext('2d')
        ctx2.fillStyle = '#ffffff'
        ctx2.fillRect(0, 0, 250, 250)
        const img = new Image()
        img.src = base64
        img.onload = function() {
          ctx2.drawImage(img, 25, 0, 200, 200)
          const fontWidth = getFontWidth(Math.floor(250/text.length),'Arial bold',ctx,text)
          ctx2.font = Math.floor(250/text.length)+'px Arial bold'
          ctx2.fillStyle = '#4D88F7'
          console.log((250 - fontWidth))
          ctx2.fillText(text, (250 - fontWidth)/2, 220)
          const base642 = canvas2.toDataURL('image/jpeg', 1)
          cb && cb(base642)
        }
      }
    }
  })
}
